<template>
	<div>
		<h1>填表界面</h1>
		扫码：<input id="text" type="text" v-model="text" placeholder="光标定位后扫码获取文本" autofocus style="width:80%" />
		<button @click="parseTable()">解析</button>
		<br />
		<br />
		<div class="bom">
			工号：<input type="text" :value="bomData.LACODSEQ" readonly>
			零件图号：<input type="text" :value="bomData.TY" readonly>
			零件名称：<input type="text" :value="bomData.REQUIRES" readonly>
			工序号/工序名称：<input type="text" :value="bomData.JYBZ" readonly>
			单件号：<input type="text" :value="bomData.SYMBOL" readonly>
		</div>

		<div>
			<table width="100%" class="table" id="tablevalue">
				<tr style="background-color: #d4e8f9;font-size: 14px;">
					<th>行号</th>
					<th>工序/工步</th>
					<th>检验性质</th>
					<th>检验内容</th>
					<th>符号</th>
					<th>专检字段</th>
					<th>最大值</th>
					<th>最小值</th>
					<!-- 用户填写 -->
					<th>测量值</th>
					<th>检验结果备注</th>
					<th>是否合格</th>
				</tr>
				<tr v-for="(item,index) in dataList" :key="item.ID">
					<td>{{index + 1}}</td>
					<td>{{ item.LACODSEQ }}</td>
					<td>{{ item.TY }}</td>
					<td>{{item.REQUIRES}}</td>
					<td>{{item.SYMBOL}}</td>
					<td>{{item.JYBZ}}</td>
					<td>{{item.MAXVAL}}</td>
					<td>{{item.MINVAL}}</td>
					<!-- 填写 -->
					<td><input type="text" v-model="item.VAL" /></td>
					<td><input type="text" v-model="item.RESULT" /></td>
					<!-- <td><input type="text" v-model="item.AAA" /></td> -->
					<td>
						<!-- 单选框 -->
						<input type="radio" value="合格" v-model="item.AAA" >合格
						<input type="radio" value="不合格" v-model="item.AAA">不合格
					</td>

				</tr>
			</table>
		</div>

		<button @click="generateQRcode()" style=" margin-top:1%;">生成二维码</button>
		<!-- <button @click="downloadE()">下载</button> -->
		<br />
		<br />
		<div id="qrcode" ref="qrcode"></div>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'

	export default {
		name: 'DataTable',
		data() {
			return {
				text: "",
				qrText: "",
				bomData: {
					"ID": "",
					"LACODSEQ": "", //工号
					"TY": "", //零件图号
					"REQUIRES": "", //零件名称
					"SYMBOL": "", //单件号
					"JYBZ": "", //工序号/工序名称
					"MAXVAL": "",
					"MINVAL": "",
					"VAL": "",
					"RESULT": "",
					"AAA": ""
				},
				dataList: [{
					"ID": "",
					"LACODSEQ": "", //工序/工步
					"TY": "", //检验性质：定量，0定性
					"REQUIRES": "", //检验内容
					"SYMBOL": "", //符号
					"JYBZ": "", //专检字段
					"MAXVAL": "", //最大值
					"MINVAL": "", //最小值
					// 下面字段需要用户填写
					"VAL": "", //测量值
					"RESULT": "", //检验结果备注
					"AAA": "" //是否合格
				}],
			}
		},
		methods: {
			parseTable() {
				var newDataList = JSON.parse(this.text);
				// Vue.set(app, "dataList", newDataList);
				this.bomData = newDataList[0];
				this.bomData.JYBZ = newDataList[1].LACODSEQ.split(":")[1];
				//获取newDataList[0]之外的其他数据
				// this.dataList = newDataList.shift();
				this.dataList = newDataList.slice(1);
				// alert(this.dataList[0]);
				console.log("dataList:" + this.dataList);


			},
			generateQRcode() {
				// 获取整个表格数据
				// let tableData = this.dataList;
				// alert(JSON.stringify(tableData));
				let tableData = this.dataList.map(item => {
					return {
						ID: item.ID,
						SYMBOL: item.SYMBOL,
						VAL: Number(item.VAL),
						RESULT: item.RESULT,
						AAA: item.AAA
					};
				});

				// 把零件信息bomData放到tableData[0]的位置返回
				let newBomData = {
					ID: this.bomData.LACODSEQ,
					SYMBOL: this.bomData.TY,
					VAL: this.bomData.REQUIRES,
					RESULT: this.bomData.JYBZ,
					AAA: this.bomData.SYMBOL
				};
				tableData.unshift(newBomData);

				// tableData.unshift(this.bomData);
				// 进行下面的操作，比如发送到后端或保存到本地
				// console.log(tableData);
				this.qrText = JSON.stringify(tableData);
				alert(this.qrText);
				// this.$nextTick 是 Vue.js 提供的一个方法，用于在 DOM 更新后执行回调函数
				this.$nextTick(function() {
					this.showQrcode();
				})
			},
			showQrcode() {
				document.getElementById("qrcode").innerHTML = "";
				var qrcode = new QRCode('qrcode', { // 第一个入参是组件id
					text: this.qrText, // 生成二维码的文本
					width: 300,
					height: 300,
					colorDark: '#000000', // 二维码色
					colorLight: '#ffffff', // 背景色
					correctLevel: QRCode.CorrectLevel.L // 容错等级L、M、Q、H，H是heigh，最高，所以二维码看起来很密
				})
			},

			// 点击下载app二维码
			// downloadE是一个按钮事件，点击按钮下载
			downloadE(name) {
				var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
				var a = document.createElement("a");
				var event = new MouseEvent("click"); // 创建一个单击事件
				a.href = canvasData[0].toDataURL("image/png");;
				a.download = "drcQrcode";
				a.dispatchEvent(event); // 触发a的单击事件
			},
			// getBomNumber(str){
			// 	return str.split("：")[1];
			// }
		}
	}
</script>

<style>
	.table {
		border: 1px solid #cad9ea;
		color: #666;
	}

	.table th {
		background-repeat: repeat-x;
		height: 30px;
	}

	.table td,
	.table th {
		border: 1px solid #cad9ea;
		padding: 0 1em 0;
	}

	.table tr.alter {
		background-color: #f5fafe;
	}

	#qrcode {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 可选：设置 div 的宽高等样式 */
		/* width: 300px;
	  height: 300px;
	  background-color: lightgray; */
	}
</style>
